<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        #startBox{
            background: url('./img/dadishu-back.jpg');
        }
        .startBtn{
            position: absolute;
            width: 126px;
            height: 41px;
            left: 50%;
            margin-left: -53px;
            bottom: 60px;
            background: url("./img/dadishu-start-btn_03.png") no-repeat;
            background-size: 100% 100%;
        }
        .weiText{
            font-size: 16px;
            color: #5c2901;
        }
        .tip1{
            font-size: 14px;
        }
        .tip2{
            font-size: 12px;
        }
        .btn1{
            background: #6a3906;
        }
        .btn2{
            background: #b18750;
        }
    </style>
</head>
<body>
<div id="content">
    <transition name="left">
        <div id="startBox" v-show="startSwitch">
            <div class="startBtn" v-on:click="closeStart"></div>
        </div>
    </transition>
    <div id="gameBox">
        <div class="imgBox w100">
            <img src="./img/back.jpg" alt="">
        </div>
        <div class="toolBox countBox">{{hitNum}}</div>
        <div class="toolBox timeBox">{{time}}s</div>
        <ul class="shuBox clear">
            <li v-for="(sta,i) in staList" v-bind:class="'sta' + sta.sta" v-on:click="hitShu($event,i)">
                <img src="./img/dong1_03.png" class="sta1">
                <img src="./img/dong2_03.png" class="sta2">
                <img src="./img/dong3_03.png" class="sta3">
                <img src="./img/chuizi_03.png" class="chui">
            </li>
        </ul>
    </div>
    <!----弹窗---->
    <transition name="fade">
        <div class="x-dialog-back" v-show="backSwitch"></div>
    </transition>
    <transition name="bottom">
        <div class="x-dialog failBox" v-show="backSwitch">
            <div class="x-dialog-close" v-on:click="closeDialog"></div>
            <div class="x-dialog-info">
                <p class="tip1">您成功打到了<span class="weiText">{{hitNum}}只地鼠</span></p>
                <p class="tip2">还差<span class="weiText">3只</span>才能成功获得抽奖机会哦</p>
            </div>
            <!--<div class="x-dialog-btn btn1">抽奖</div>-->
            <div class="x-dialog-btn btn1" v-on:click="again">再打一次</div>
            <div class="x-dialog-btn btn2">叫上小伙伴</div>
        </div>
    </transition>
</div>
<script>
    var oldTime = 0;
    new Vue({
        el: '#content',
        data: {
            staList: [],
            time: 30, //游戏时间
            timeInter: null,
            hitNum: 0, //打中的次数
            startSwitch: true,
            staCheckInter: null, //状态检测定时器
            makeShuInter: null, //产生老鼠定时器
            backSwitch: false
        },
        created(){
            oldTime = this.time;
            for(let i = 0; i < 9; i++){
                let o = {
                    sta: 1,
                    time: 0,
                    isHit: false
                };
                this.staList.push(o);
            }
        },
        methods:{
            init(){
                this.staCheckShu();
                this.makeShu();
                let _this = this;
                this.timeInter = setInterval(function(){
                    console.log(_this.time);
                    if(_this.time == 0){
                        clearInterval(_this.timeInter);
                        _this.timeInter = null;
                        _this.staCheckShu();
                        _this.makeShu();
                        _this.openDialog();
                        return;
                    }
                    _this.time--;
                },1000)
            },
            hitShu(e,i){ //点击打老鼠
                if(this.staList[i].sta == 2){
                    this.staList[i].sta = 3;
                    this.staList[i].time = 6;
                    this.hitNum += 1;
                }
            },
            staCheckShu(){
                let _this = this;
                if(!this.staCheckInter){
                    this.staCheckInter = setInterval(function(){
                        for(let i = 0; i < 9; i++){
                            if(_this.staList[i].sta != 1){
                                _this.staList[i].time--;
                            }
                            if(_this.staList[i].time <= 0){
                                _this.staList[i].sta = 1;
                            }
                        }
                    },100);
                }else{
                    clearInterval(this.staCheckInter);
                    this.staCheckInter = null;
                }
            },
            makeShu(){
                let _this = this;
                if(!this.makeShuInter){
                    this.makeShuInter = setInterval(function(){
                        let n = _this.makeOneUp();
                        _this.staList[n].sta = 2;
                        _this.staList[n].time = 8;
                    },1500)
                }else{
                    clearInterval(this.makeShuInter);
                    this.makeShuInter = null;
                }
            },
            makeOneUp(){
                let n = Math.floor((Math.random() * 10 - 0.1));
                if(this.staList[n].sta != 1){
                    arguments.callee();
                }else{
                    return n;
                }
            },
            closeStart(){
                this.startSwitch = false;
                this.init();
            },
            openDialog(){
                this.backSwitch = true;
            },
            closeDialog(){
                this.backSwitch = false;
            },
            again(){
                this.closeDialog();
                this.reload();
                this.init();
            },
            reload(){
                this.time = oldTime;
                this.hitNum = 0;

            }
        }
    })
</script>
</body>
</html>